<script>
export default {
  render(c) {
    const side = this.sidebar.side;
    const sideUpperCase = side.replace(side[0], side[0].toUpperCase());

    const children = [];
    children.push(
      c('f7-link', {
        props: {
          iconF7: '::delete',
          tooltip: this.$text('PanelDelete'),
        },
        on: {
          click: this.onClickClose,
        },
      })
    );
    children.push(
      c('f7-link', {
        props: {
          iconF7: '::remove',
          tooltip: this.$text('PanelFold'),
        },
        on: {
          click: this.onClickHide,
        },
      })
    );
    if (!this.layout.size.verySmall) {
      const cover = this.layout[`sidebarCover${sideUpperCase}`];
      children.push(
        c('f7-link', {
          props: {
            iconF7: cover ? '::chevron-left' : '::expand-more',
            tooltip: this.$text(cover ? 'PanelFloating' : 'PanelFixed'),
          },
          on: {
            click: this.onClickCover,
          },
        })
      );
    }
    const toolbar = c(
      'f7-toolbar',
      {
        ref: 'toolbar',
        staticClass: 'panel-toolbar',
        attrs: {},
      },
      children
    );
    return toolbar;
  },
  props: {
    side: {
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {
    layout() {
      return this.sidebar.layout;
    },
    sidebar() {
      return this.$parent;
    },
  },
  methods: {
    onClickCover() {
      if (this.layout.size.verySmall) return;
      this.sidebar.options.cover = !this.sidebar.options.cover;
      this.layout.onResize();
      this.layout.__saveLayoutConfig();
    },
    onClickHide() {
      this.sidebar.setOpened(!this.sidebar.options.opened);
    },
    onClickClose() {
      const view = this.sidebar._getTopView();
      if (!view) return;
      const viewEl = this.$$('#' + view.id)[0];
      const viewVue = viewEl.__vue__;
      const dirty = viewVue.getViewDirty && viewVue.getViewDirty();
      if (!dirty) {
        this.sidebar.closeView(viewEl.f7View);
        return;
      }
      viewVue.viewDirtyConfirm(() => {
        this.sidebar.closeView(viewEl.f7View);
      });
    },
  },
};
</script>
